<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-07-19 15:30:35
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-16 09:19:11
-->
<div class="notice">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>消息通知</span>
                </h3>
            </div>
        </div>
    </div>
    <div style="display: flex;">
        <div class="col-lg-3" style="padding-right: 0px;">
            <div class="m-portlet m-portlet--mobile">
                <div class="row align-items-center">
                    <div class="primeng-datatable-container">
                        <div class="col-md-12" style="
                                                float: left;
                                                height: 780px;
                                            ">
                            <p-tree [value]="files2" selectionMode="single" [(selection)]="selectedFiles"
                                (onNodeSelect)="nodeSelect($event)" [style]="{ height: '90%' }" [loading]="loadingtree">
                                <ng-template let-node pTemplate="default">
                                    <span> {{node.affairDesc}} </span>
                                </ng-template>
                            </p-tree>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="m-portlet m-portlet--mobile">
                <div class="row align-items-center" style="width: 100%;">
                    <div class="primeng-datatable-container" style="margin-left: 5px;">
                        <div class="col-md-12" style=" float: left;height: 780px; width: 100%;">
                            <div class="p-formgroup-inline" style="margin-top: 20px;">
                                <span class="p-field">
                                    <p-dropdown (onChange)="onChange($event)" name="selectType"
                                        [options]="selectTypeOption" [(ngModel)]="selectType">
                                        <ng-template let-select pTemplate="selectedItem">
                                            <span
                                                style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                                        </ng-template>
                                        <ng-template let-select pTemplate="select">
                                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                                <div style="font-size:14px;float:right;margin-top:4px;width: 175px;">
                                                    {{select.label}}</div>
                                            </div>
                                        </ng-template>
                                    </p-dropdown>
                                </span>
                                <span class="p-field" style="margin-left: 60px;">
                                    <p-button *ngIf="'Pages.MessageNotification.MarkRead' | permission" label="标记已读" (onClick)="markRead()"></p-button>
                                </span>
                                <span *ngIf="'Pages.MessageNotification.Delete' | permission" class="p-field" style="margin-left: 60px;">
                                    <p-button label="删除" (onClick)="delete()"></p-button>
                                </span>
                            </div>
                            <div class="primeng-datatable-container" style="margin-top: 10px;width : 100%;">
                                <p-table #dataTable [value]="primengTableHelper.records"
                                    rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                    [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                    [responsive]="primengTableHelper.isResponsive"
                                    [resizableColumns]="primengTableHelper.resizableColumns" [(selection)]="selectRow">
                                    <ng-template pTemplate="header" selectionMode="multiple">
                                        <tr>
                                            <th style="width: 50px">
                                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                            </th>
                                            <th>状态</th>
                                            <th>标题</th>
                                            <th>内容</th>
                                            <th>时间</th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                        <tr>
                                            <td style="width: 50px">
                                                <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                            </td>
                                            <td (click)="selectrow(record)">
                                                <span *ngIf="record.readState ==1" style="color:#c03;">未读</span>
                                                <span *ngIf="record.readState ==2" style="color:#9c0 ">已读</span>
                                            </td>
                                            <td (click)="selectrow(record)">{{record.title}}</td>
                                            <td (click)="selectrow(record)">{{record.message}}</td>
                                            <td>{{record.createTime | momentFormat:'YYYY-MM-DD HH:mm:ss'}}</td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div class="primeng-paging-container">
                                    <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                        [totalRecords]="primengTableHelper.totalRecordsCount"
                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                                        (onPageChange)="getTableList($event)">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 读取内容弹窗 -->
    <p-dialog header="消息内容详情" [(visible)]="display" [modal]="true" [responsive]="true" [style]="{width: '350px'}"
        [minY]="70" [baseZIndex]="10000" (onHide)="onHide($event)">
        <p style="font-size: 20px;">{{messageDetail}}</p>
    </p-dialog>
</div>